<template>
  <Modal v-model="modal" :title="title" :width="width" @on-visible-change="onVisibleChange" :transfer="true">
    <template v-slot:footer>
      <div class="footer">
        <Button @click="onClose">关闭</Button>
      </div>
    </template>
    <slot></slot>
    <dt-info :line-number="lineNumber" :label-width="labelWidth" ref="info"></dt-info>
    <slot name="bottom"></slot>
  </Modal>
</template>

<script>
  export default {
    props: {
      width: Number,
      title: String,
      labelWidth: Number,
      lineNumber: Number,
      transfer: Boolean
    },
    data() {
      return {
        modal: false,
        info: null
      }
    },
    methods: {
      show(Opt, info) {
        if (Opt) {
          this.$refs.info.init(Opt, info)
        }
        this.modal = true
      },
      hide() {
        this.modal = false
      },
      onClose() {
        this.modal = false
      },
      onVisibleChange(show) {
        if (!show) {
          this.$emit('close')
        }
      }
    }
  }
</script>

<style lang="scss" scoped></style>
